<template>
	<!-- 主容器，根据darkMode状态切换暗黑模式 -->
	<view class="container" :class="{ dark: darkMode }">
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack"><</view>
			<!-- 页面标题 -->
			<view class="nav-title">设置</view>
		</view>
		
		<!-- 设置项列表 -->
		<view class="settings-list">
			<!-- 账户设置分组 -->
			<view class="setting-group">
				<text class="group-title">账户设置</text>
				<!-- 个人资料设置项 -->
				<view class="setting-item" @click="editProfile">
					<text class="setting-icon">👤</text>
					<text class="setting-label">个人资料</text>
					<text class="setting-arrow">></text>
				</view>
				<!-- 修改密码设置项 -->
				<view class="setting-item" @click="changePassword">
					<text class="setting-icon">🔒</text>
					<text class="setting-label">修改密码</text>
					<text class="setting-arrow">></text>
				</view>
			</view>
			
			<!-- 应用设置分组 -->
			<view class="setting-group">
				<text class="group-title">应用设置</text>
				<!-- 夜间模式设置项 -->
				<view class="setting-item">
					<text class="setting-icon">🌙</text>
					<text class="setting-label">夜间模式</text>
					<!-- 开关组件 -->
					<switch :checked="darkMode" @change="toggleDarkMode" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			pushEnabled: true,  // 推送通知开关状态
			darkMode: false     // 夜间模式开关状态
		}
	},
	
	// 页面显示生命周期钩子
	onShow() {
		// 从全局读取夜间模式状态
		this.darkMode = getApp().globalData.darkMode || false;
	},
	
	methods: {
		/**
		 * 返回上一页
		 */
		goBack() {
			uni.switchTab({
				url: '/pages/AppCenter/AppCenter'  // 返回应用中心页
			})
		},
		
		/**
		 * 编辑个人资料
		 */
		editProfile() {
			uni.showToast({ title: '个人资料设置', icon: 'none' });
			uni.navigateTo({
				url: '/pages/edit-profile/edit-profile'  // 跳转到个人资料编辑页
			})
		},
		
		/**
		 * 修改密码
		 */
		changePassword() {
			uni.showToast({ title: '修改密码', icon: 'none' });
			uni.navigateTo({
				url: '/pages/password/password'  // 跳转到密码修改页
			})
		},
		
		/**
		 * 切换推送通知开关
		 * @param {Object} e - 事件对象
		 */
		togglePush(e) {
			this.pushEnabled = e.detail.value;  // 更新推送开关状态
		},
		
		/**
		 * 切换夜间模式
		 * @param {Object} e - 事件对象
		 */
		toggleDarkMode(e) {
			this.darkMode = e.detail.value;
			// 更新全局夜间模式状态
			getApp().globalData.darkMode = this.darkMode;
			// 持久化存储夜间模式设置
			uni.setStorageSync('darkMode', this.darkMode);
		
			if (this.darkMode) {
				// 夜间模式下的tabBar样式
				uni.setTabBarStyle({
					backgroundColor: '#1e1e1e',
					borderStyle: 'black',
					color: '#999999',
					selectedColor: '#ffffff'
				});
		
				// 夜间模式下的导航栏样式
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#1e1e1e'
				});
			} else {
				// 白天模式下的tabBar样式
				uni.setTabBarStyle({
					backgroundColor: '#ffffff',
					borderStyle: 'black',
					color: '#7A7E83',
					selectedColor: '#fb7e29'
				});
		
				// 白天模式下的导航栏样式
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#F8F8F8'
				});
			}
		},
		
		/**
		 * 车辆配置
		 */
		carSettings() {
			uni.showToast({ title: '车辆配置', icon: 'none' });
		},
		
		/**
		 * 连接设置
		 */
		connectionSettings() {
			uni.showToast({ title: '连接设置', icon: 'none' });
		}
	}
}
</script>
<style lang="scss">
// 导入公共样式
@import "@/common/page-style.scss";

// 主容器样式
.container {
	background: #f5f5f5;  // 浅灰色背景
	min-height: 100vh;   // 最小高度为视口高度

	// 暗黑模式样式
	&.dark {
		background: #1e1e1e;  // 深色背景

		.group-title {
			color: #aaa;  // 浅灰色标题
		}

		.setting-item {
			background: #2c2c2c;  // 深色卡片背景
			box-shadow: 0 4rpx 12rpx rgba(255,255,255,0.05);  // 浅色阴影

			.setting-label {
				color: #eee;  // 浅灰色文字
			}

			.setting-arrow {
				color: #777;  // 灰色箭头
			}
		}
	}
}

// 导航栏样式
.nav-bar {
  height: 88rpx;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  background: #fff;  // 白天背景
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);  // 阴影效果

  // 暗黑模式下的导航栏
  .container.dark & {
    background: #1e1e1e;  // 夜间背景
    box-shadow: none;  // 移除阴影
  }
}

// 导航标题样式
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  color: #333;  // 白天文字色

  .container.dark & {
    color: #fff;  // 夜间文字色
  }
}

// 返回按钮样式
.nav-back {
  margin-right: 20rpx;
  font-size: 40rpx;
  cursor: pointer;
  color: #333;  // 白天文字色

  .container.dark & {
    color: #fff;  // 夜间文字色
  }
}

// 设置列表样式
.settings-list {
	padding: 40rpx;  // 内边距
}

// 设置分组样式
.setting-group {
	margin-bottom: 40rpx;  // 分组间距
}

// 分组标题样式
.group-title {
	color: #666;  // 灰色文字
	font-size: 28rpx;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	display: block;
}

// 设置项样式
.setting-item {
	background: white;  // 白色背景
	border-radius: 24rpx;  // 圆角
	padding: 40rpx;  // 内边距
	margin-bottom: 16rpx;  // 项间距
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);  // 阴影效果
}

// 设置项图标样式
.setting-icon {
	font-size: 40rpx;
	margin-right: 32rpx;  // 与文字间距
}

// 设置项标签样式
.setting-label {
	flex: 1;  // 占据剩余空间
	font-size: 32rpx;
	color: #333;  // 深灰色文字
}

// 设置项箭头样式
.setting-arrow {
	color: #ccc;  // 浅灰色
	font-size: 28rpx;
}
</style>